<script setup>
import { onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import usePageTitle from '@/hooks/usePageTitle'
import useNavToLogin from '@/hooks/useNavToLogin'
import { getBlogById, createBlog, editBlog } from '../api/blogApi';

useNavToLogin() // 未登录时跳转到登录页

const $route = useRoute()
const $router = useRouter()

const id = $route.params.id
// 定义 title ，根据 id 判断 title
const title = id ? '编辑博客' : '创建博客'
usePageTitle(title)

// onMounted 时候，如果有 id ，则获取博客详情
const blogDetail = reactive({})
onMounted(async () => {
    if (!id) return
    const data = await getBlogById(id)
    blogDetail.title = data.title
    blogDetail.content = data.content
    blogDetail.category = data.category
})

// 表单验证
const validateForm = () => {
    if (!blogDetail.title) {
        alert('请输入标题');
        return false;
    }
    if (!blogDetail.content) {
        alert('请输入内容');
        return false;
    }
    if (!blogDetail.category) {
        alert('请选择类型');
        return false;
    }
    return true;
};

// 确认提交
const confirmSubmit = async () => {
    const confirm = await ElMessageBox.confirm('提交数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    });
    return confirm === 'confirm';
};

// 提交
const submit = async () => {
    if (!validateForm()) return;

    if (!await confirmSubmit()) return;

    const data = {
        title: blogDetail.title,
        content: blogDetail.content,
        category: blogDetail.category
    }

    if (id) {
        await editBlog(id, data)
    } else {
        await createBlog(data)
    }

    $router.push('/myBlog')
}
</script>

<template>
    <div class="top-container">
        <div class="top-left">
            <h2>{{ title }}</h2>
        </div>
        <div class="top-right">
            <el-button type="primary" @click="submit">提交</el-button>
        </div>
    </div>

    <div class="title-container">
        <div class="title-left">
            <span class="label">标题</span>
            <el-input v-model="blogDetail.title" placeholder="请输入标题" style="width: 500px;"></el-input>
        </div>
        <div class="title-right">
            <span class="label">类型</span>
            <el-select v-model="blogDetail.category" placeholder="请选择类型">
                <el-option label="前端" value="前端"></el-option>
                <el-option label="Java" value="Java"></el-option>
                <el-option label="Python" value="Python"></el-option>
                <el-option label="小程序" value="小程序"></el-option>
            </el-select>
        </div>
    </div>

    <div class="content-container">
        <el-input type="textarea" :rows="20" v-model="blogDetail.content" placeholder="请输入内容"
            style="width: 100%;"></el-input>
    </div>
</template>

<style scoped>
.top-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    /* border: 1px solid #ccc; */
}

.top-left {
    flex-grow: 1;
}

.top-right {
    margin-left: 10px;
}

.title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    /* border: 1px solid #ccc; */
}

.title-left,
.title-right {
    display: flex;
    align-items: center;
}

.title-right {
    margin-left: 20px;
}

.label {
    display: inline-block;
    width: 45px;
}
</style>